
import React,{ Component } from 'react';
import { Form, DatePicker, TimePicker, Button } from 'antd';
const FormItem = Form.Item;
const MonthPicker = DatePicker.MonthPicker;
const RangePicker = DatePicker.RangePicker;

class RangePickers extends Component {
	constructor(props) {
		super(props);
		this.state = {

		}
    }
    handleSubmitEvent(e) {
        this.props.form.validateFields((err, fieldsValue) => {
            if (err) {
                return;
            }else {
                console.log('fieldsValue',fieldsValue);
            }

            const rangeValue = fieldsValue['range-picker'];
            const values = {
                ...fieldsValue,
                'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
            }
            console.log('Received values of form: ', values);
        })
    }
	render() {
        const { getFieldDecorator } = this.props.form;
		return (
			<Form>
                <FormItem
                    label="RangePicker"
                >
                    {/* <RangePicker /> */}
                    {getFieldDecorator('range-picker')(
                        <RangePicker />
                    )}
                </FormItem>
                <FormItem>
                    <Button 
                        type="primary"
                        onClick={ this.handleSubmitEvent.bind(this) }>
                        Submit
                    </Button>    
                </FormItem>
            </Form>
		)
	}
}
//export default RangePickers;
export default Form.create()(RangePickers);